@extends('public.base')
@section('body')
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="layui-breadcrumb" lay-filter="breadcrumb">
                    <a lay-href="{{url('admin/console')}}">主页</a>
                    <a><cite>用户管理</cite></a>
                    <a><cite>用户层级</cite></a>
                </div>
            </div>
            <!-- 搜索区/按钮区 -->
            <div class="layui-form layui-card-header layuiadmin-card-header-auto layui-form-pane">
                <form id="search_form" name="search_form" lay-filter="search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label layui-hide-md">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" class="layui-input"
                                       placeholder="标题,如:头部广告" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label layui-hide-md">位置</label>
                            <div class="layui-input-inline" style="width:140px">
                                <select  name="type">
                                    <option value="">按位置搜索</option>
                                    <option value="1">幻灯片</option>
                                    <option value="2">顶部广告</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <button id="search_btn" class="layui-btn layui-btn-normal"><i
                                            class="layui-icon" lay-submit="">&#xe615;</i>搜索
                                </button>
                                <button id="add_btn" name="add_btn" class="layui-btn"><i class="layui-icon">&#xe654;</i>新增
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="layui-card-body">
                <!-- 表格定义 -->
                <table class="layui-table" id="main_table"  lay-filter="main_table"></table>
                <!-- 操作按钮定义 -->
                <script type="text/html" id="search_table-operate-bar">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-xs" lay-event="edit">修改</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
                    </div>
                </script>
            </div>
        </div>

    </div>
</div>
<!-- 勿删，这里是显示帮助说明文，会调用系统菜单中的说明文档 -->
<div id="page_tip"></div>
<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js?{{time()}}"></script>
<script src="{{ADMIN_PATH}}js/admin.common.js?{{time()}}"></script>
<script>
    // ==========================  公共变量区  ===========================================
    var index_url = '{{url('admin/memberlevel/index')}}';
    var add_url = '{{url('admin/memberlevel/add')}}';
    var edit_url = '{{url('admin/memberlevel/edit')}}';
    var del_url = '{{url('admin/memberlevel/del')}}';

    //表格id
    var main_table_id = 'main_table';
    //搜索区的表单form id
    var search_form_id = 'search_form';
    //初始化后的表格对象
    var main_table;

    // ==========================  全局函数区  ===========================================

    //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
    function reload_data(param) {
        //搜索表格
        do_search_table(main_table, search_form_id, param);

    }

    // ==============================  业务处理  ==============================================
    layui.config({
        base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){

        //========================================== layui引用区 ==========================================
        var $ = layui.$,
            table = layui.table
            , form = layui.form
            , element = layui.element
        ;

        // ==============================  业务区  =========================================
        //表格默认排序字段
        var table_sort = 'list_order';
        var table_order = 'asc';

        main_table = table.render({
            elem: '#' + main_table_id
            , url: index_url //异步数据接口
            , method: 'post' //接口http请求类型
            //, headers: {token: '123456'} //接口的请求头
            , limit: 10 //每页显示的条数
            , limits: 50//	每页条数的选择项
            , initSort: { //初始化时的排序,如果不设的话，将无法标记表头的排序状态
                field: table_sort
                , type: table_order
            }
            , where: {sort: table_sort, order: table_order}
            , loading: true //显示加载
            , text: '查询无数据' //空数据时的异常提示
            , page: true //开启分页
            , cols: [
                [ //标题栏
                    {title: 'lid', field: 'id', width: 65, sort: true, rowspan: 2}
                    , {title: '层级名称', field: 'level_name', width: 125, sort: true, edit: false, rowspan: 2}
                    , {title: '加入条件', align: 'center', colspan:9}
                    , {title: '会员数', field: 'level_user_num', width: 95, rowspan: 2,sort: true}
                    , {title: 'vip会员数', field: 'vip_user_num', width: 95, rowspan: 2,sort: true}
                    , {
                    title: '操作',
                    toolbar: '#search_table-operate-bar',
                    width: 120,
                    align: 'center',
                    fixed: 'right',
                    rowspan: 2
                }
                ], [
                    {title: 'VIP购飞次数', field: 'vip_pay_times', width: 125, sort: true, edit: false}
                    , {title: 'VIP总额', field: 'vip_pay_amount', width: 125, sort: true, edit: false}
                    , {title: '消费总次数', field: 'pay_max_amount', width: 125, sort: true, edit: false}
                    , {title: '累计消费总额', field: 'order_money', width: 125, sort: true, edit: false}
                    , {title: '金币总额', field: 'score_all', width: 125, sort: true, edit: false}
                    , {title: '金币消费总额', field: 'score_consume', width: 125, sort: true, edit: false}
                    , {title: '提款次数', field: 'withdraw_times', width: 105, sort: true, edit: false}
                    , {title: '提款手续费', field: 'poundage_amount', width: 125, sort: true, edit: false}
                    , {title: '提款总额', field: 'withdraw_amount', width: 105, sort: true, edit: false}
                ]
            ]
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                if (res.status != 200) {
                    show_error(res.message);
                }
                if (count == 0) {
                    layer.msg('暂无相关数据');
                }
            }
        });


        // ==============================  监听区  =========================================

        // 表格监听
        table.on('sort()', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //console.log(obj.field); //当前排序的字段名
            //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            reload_data({sort: {sort: obj.field, order: obj.type}});
        });

        //表格中的所有的switch监听
        form.on('switch()', function (obj) {
            //当前表格行数据
            var json = JSON.parse(decodeURIComponent($(this).data('json')));

            var name = obj.elem.name;
            var value = obj.elem.checked === true ? 1 : 0;

            var o = {};
            //数据库更新的主键
            o['id'] = json.id;
            //获取当前点击的checkbox的input名称和值
            o[name] = value;

            console.log(o);
            layer.confirm('确定改变当前状态吗?', function (index) {
                //提交数据，1、提交网址 2、提交数据 3、是否关闭本iframe窗口(在弹出iframe时使用)
                post_data(edit_url, o, ''
                    //正确返回时，执行
                    , function () {
                        //
                    }
                    //错误返回或其它错误时，执行
                    , function () {
                        obj.elem.checked = !obj.elem.checked;
                        //重新渲染
                        form.render();
                    });

                //关闭自身提示框
                layer.close(index);
            }, function (index) {
                //按钮【按钮二】的回调
                obj.elem.checked = !obj.elem.checked;
                //重新渲染
                form.render();
            });

        });

        //其他按钮监听
        $("#search_btn").on('click', function () {
            reload_data();
            return false;
        });

        $("#add_btn").on('click', function () {
            var index = layer.open({
                type: 2
                , title: '新增'
                , content: add_url
                , area: ['80%', '580px'] //宽高
                , maxmin: true
                , scrollbar: false
                , end: function (index, layero) {
                    //关闭弹窗后的事件
                }
            });
            return false;
        });

        //监听单元格编辑
        table.on('edit(main_table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var o = {};
            o['id'] = data.id;
            o[field] = value;

            layer.confirm('确定修改吗?', function (index) {
                //提交数据
                post_data(edit_url, o, ''
                    //正确返回时，执行
                    , function () {
                        reload_data();
                    }
                    //错误返回或其它错误时，执行
                    , function () {
                    });

                //关闭自身提示框
                layer.close(index);
            });
        });

        //工具条监听
        table.on('tool(main_table)', function (obj) {
            var data = obj.data;
            //删除事件
            if (obj.event === 'del') {
                layer.confirm('确定删除吗?', function (index) {
                    //提交数据
                    var o = {id: data.id};
                    post_data(del_url, o, ''
                        //正确返回时，执行
                        , function () {
                            reload_data();
                        }
                        //错误返回或其它错误时，执行
                        , function () {
                        });

                    //关闭自身提示框
                    layer.close(index);
                });
            }
            //修改事件
            else if (obj.event === 'edit') {
                var index = layer.open({
                    type: 2
                    , title: '编辑:' + data.level_name
                    , content: edit_url + "?id=" + data.id
                    , area: ['80%', '580px'] //宽高
                    , maxmin: true
                    , scrollbar: false
                    , end: function (index, layero) {
                        //关闭弹窗后的事件
                    }
                });
            }
        });

        //监听搜索表单提交
        form.on('submit(search-form)', function (data) {
            return false;
        });

        //========================================== 渲染区 ==========================================
        //表单重新渲染，请保存到最后一行
        //渲染表单
        form.render(null, 'search_form');
        //导航栏渲染
        element.render('breadcrumb', 'breadcrumb');
    });
</script>
@stop